<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>统战成员学习平台</title>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<body class="white">
<div id='app' class="app paper" style="display:none" v-show="true">
    <div class="title" id="title">
        <p>{{name}}</p>
        <div class="time">
            <img src="../../image/clock.png" alt="">
            <div class="clk">{{timeText}}</div>
        </div>
    </div>
    <div v-for="(single, index) in singleQuestions" class="question">
        <p><span>单选</span>{{single.createOrder + 1}}. {{single.title}}</p>
        <ul class="ui_border_b">
            <li v-for="(option, oindex) in single.optList">
                <label :for="option.qustOptionId">
                    <div>
                        <input type="radio" :id="option.qustOptionId" :value="{questionId: single.qustionId, answer: option.qustOptionId}" v-model="singleAnswers[index]">
                        <span class="dui">{{indexs[oindex]}}</span>
                    </div>
                    {{option.optContent}}
                </label>
            </li>
        </ul>
    </div>
    <div v-for="(multi, index) of multiQuestions" class="question">
        <p><span>多选</span>{{multi.createOrder + 1}}. {{multi.title}}</p>
        <ul class="ui_border_b">
            <li v-for="(option, oindex) of multi.optList">
                <label :for="option.qustOptionId">
                    <div>
                        <input type="checkbox" :id="option.qustOptionId" :value="option.qustOptionId" v-model="multiAnswers[index].answer">
                        <span class="dui">{{indexs[oindex]}}</span>
                    </div>
                    {{option.optContent}}
                </label>
            </li>
        </ul>
    </div>
    <div v-for="(judge, index) of judgeQuestions" class="question">
        <p><span>判断</span>{{judge.createOrder + 1}}. {{judge.title}}</p>
        <ul class="ui_border_b">
            <li>
                <label :for="judge.qustionId+'1'">
                    <div>
                        <input type="radio" :id="judge.qustionId+'1'" :value="{questionId: judge.qustionId, answer: '1'}" v-model="judgeAnswers[index]">
                        <span></span>
                    </div>
                    正确
                </label>
            </li>
            <li>
                <label :for="judge.qustionId+'2'">
                    <div>
                        <input type="radio" :id="judge.qustionId+'2'" :value="{questionId: judge.qustionId, answer: '0'}" v-model="judgeAnswers[index]">
                        <span></span>
                    </div>
                    错误
                </label>
            </li>
        </ul>
    </div>
    <div class="btn-wrap">
        <div class="btn submit" @click="submitPaper()"><img src="../../image/submit.png" alt="">交卷</div>
    </div>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            scheduleId: 0,
            examId: 0,
            scoreId: '',
            questions: [],
            singleQuestions: [],
            multiQuestions: [],
            judgeQuestions: [],
            singleAnswers: [],
            multiAnswers: [],
            judgeAnswers: [],
            examTime: 0,
            stratTime: 0,
            isTimeOut: false,
            type: 0,
            name: '',
            indexs: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
            flag: {},
            h: 0,
            m: 0,
            s: 0,
            timeText: '00:00:00'
        },
        mounted: function () {
            var $this = this;
            apiready = function () {
                $this.examId = api.pageParam.examId;
                $this.scheduleId = api.pageParam.scheduleId;
                $this.init();
                api.addEventListener({
                    name: 'exam_time_finshed_event'
                }, function (ret, err) {
                    $this.isTimeOut = true;
                    msgUtil.alert({
                        msg: '答题时间已结束'
                    });
                    $this.submitPaper();
                });
                api.addEventListener({
                    name: 'finishExam_event'
                }, function (ret, err) {
                    msgUtil.confirm({
                        title: '提示',
                        msg: '您确认要交卷？',
                        buttons: ['确定', '取消'],
                        yes: function () {
                            $this.submitPaper();
                        }
                    });
                });
            }
        },
        methods: {
            init: function () {
                var $this = this;
                post('/client/schedule/getPaper', {
                    examRuleId: $this.examId,
                    scheduleId: $this.scheduleId
                }, function (ret) {
                    if (ret.isSuccess) {
                        $this.scoreId = ret.data.scoreId;
                        $this.examTime = ret.data.examTime;
                        $this.name = ret.data.ruleName;
                        ret.data.questionList.forEach(function (item) {
                            switch (item.type) {
                                case "410001": {
                                    $this.singleQuestions.push(item);
                                    var answers = {questionId: item.qustionId, answer: '', createOrder: item.createOrder};
                                    $this.singleAnswers.push(answers);
                                    break;
                                }
                                case "410002": {
                                    $this.multiQuestions.push(item);
                                    var answers = {questionId: item.qustionId, answer: [], createOrder: item.createOrder};
                                    $this.multiAnswers.push(answers);
                                    break;
                                }
                                case "410003": {
                                    $this.judgeQuestions.push(item);
                                    var answers = {questionId: item.qustionId, answer: '', createOrder: item.createOrder};
                                    $this.judgeAnswers.push(answers);
                                    break;
                                }
                            }
                        });
                        $this.stratTime = Date.now();
                        $this.lastTime = $this.examTime * 60 * 1000 + $this.stratTime;
                        $this.timer();
                        $this.flag = setInterval(function () {
                            $this.timer()
                        }, 1000);
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        })
                    }
                });
                parseTapmode();
            },
            setAnswer: function (questionId, answerId) {
                /*
                var $this = this;
                var answer = {questionId: questionId, answer: answerId};
                $this.myAnswers.push(answer);
                */
            },
            submitPaper: function () {
                var $this = this;
                var hasNullAnswer = false;
                questions = [];
                for (var i = 0; i < $this.singleAnswers.length; i++) {
                    var item = $this.singleAnswers[i];
                    if (!item.answer || item.answer == '') {
                        // api.alert({
                        //     msg: '第['+(item.createOrder+1)+']题没有答.'
                        // });
                        // return;
                        hasNullAnswer = true;
                    } else {
                        questions.push(item);
                    }
                }
                for (var i = 0; i < $this.multiAnswers.length; i++) {
                    var item = $this.multiAnswers[i];
                    if (!item.answer || item.answer.length == 0) {
                        // api.alert({
                        //     msg: '第['+(item.createOrder+1)+']题没有答.'
                        // });
                        // return;
                        hasNullAnswer = true;
                    } else {
                        var answers = item.answer;
                        var myanswer = '';
                        var count = 0;
                        item.answer.forEach(function (obj) {
                            if (myanswer == 0) {
                                myanswer = obj
                            } else {
                                myanswer = myanswer + ',' + obj
                            }
                            count++
                        });
                        var obj = {questionId: item.questionId, answer: myanswer};
                        questions.push(obj);
                    }
                }

                for (var i = 0; i < $this.judgeAnswers.length; i++) {
                    var item = $this.judgeAnswers[i];
                    if (!item.answer || item.answer.length == 0) {
                        // api.alert({
                        //     msg: '第['+(item.createOrder+1)+']题没有答.'
                        // });
                        // return;
                        hasNullAnswer = true;
                    } else {
                        questions.push(item);
                    }
                }

                if (hasNullAnswer && !$this.isTimeOut) {
                    msgUtil.confirm({
                        title: '提示',
                        msg: '题没答完，是否确认提交？',
                        buttons: ['确定', '取消'],
                        yes: function () {
                            $this.postPaper();
                        }
                    });
                } else {
                    $this.postPaper();
                }

            },
            postPaper: function () {
                var $this = this;
                post('/client/schedule/submitPaper', {
                    name: $this.name,
                    examRuleId: $this.examId,
                    scheduleId: $this.scheduleId,
                    scoreId: $this.scoreId,
                    questList: questions
                }, function (ret) {
                    if (ret.isSuccess) {
                        clearInterval($this.flag);
                        api.openWin({
                            name: 'exam_result_win',
                            url: './exam_result_win.html',
                            pageParam: {
                                examId: $this.examId,
                                scheduleId: $this.scheduleId,
                                scoreId: $this.scoreId,
                                examResult: JSON.stringify(ret.data)
                            }
                        });
                    } else {
                        msgUtil.toast({
                            msg: ret.message
                        })
                    }
                });
            },
            timer: function () {
                var $this = this;
                var now = $this.lastTime - Date.now();
                if (now > 0) {
                    $this.h = Math.floor(now / 1000 / 60 / 60);
                    $this.m = Math.floor((now - $this.h * 1000 * 60 * 60) / 1000 / 60);
                    $this.s = Math.floor((now - $this.h * 1000 * 60 * 60 - $this.m * 1000 * 60) / 1000);
                    $this.timeText = addo($this.h) + ':' + addo($this.m) + ':' + addo($this.s);
                } else {
                    $this.timeText = "00:00:00";
                    api.sendEvent({
                        name: 'exam_time_finshed_event'
                    });
                    clearInterval($this.flag);
                }
            }
        }
    });
    //滚动判断
    var _app = document.getElementById("app");
    window.onscroll = function () {
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (osTop >= 50) {
            _app.classList.add("fix-top");
        } else {
            _app.classList.remove("fix-top");
        }
    }
</script>
</body>
</html>
